<template>
	<view class="search">
		<view class="search-container">
			<view class="search-ipt">
				<input class="ipt" type="text" placeholder="请输入搜索关键字" v-model="keyword">
			</view>
			<view class="submit" @click="search">
				<text>搜索</text>
			</view>
		</view>
		<u-empty text="没有搜索结果" mode="search" v-if="productList.length == 0" margin-top="300"></u-empty>
		<view class="search-list" v-else>
			<view class="search-item" v-for="pro in productList" :key="pro.productUuid"
				@click="detail(pro.productUuid)">
				<view class="pri_pic">
					<image :src="'http://yihao.cdn.gd-zjgj.com/' + pro.productImg" mode="widthFix" lazy-load>
					</image>
				</view>
				<view class="pro-desc">
					<view class="title">
						{{pro.productTitle}}
					</view>
					<view class="price">
						￥{{dealPrice(pro.productPrice)}}
					</view>
					<view class="text" v-if="pro.productFeatures !== ''">
						{{pro.productFeatures}}
					</view>
					<view class="shop" v-if="pro.mallMerchantName !== ''">
						{{pro.mallMerchantName}}
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" icon-type="flower" :load-text="loadText" @loadmore="addMoreData"
			v-if="productList.length > 0" />
	</view>
</template>

<script>
	import request from '@/util/request.js'
	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				productList: [],
				status: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '正在加载中',
					nomore: '没有更多了'
				}
			}
		},
		methods: {
			search() {
				this.page = 1
				this.productList = []
				this.sendSearch()
			},
			//请求商品数据
			sendSearch() {
				request.globalRequest({
					url: '/api/public/mall/product/list',
					data: {
						productTitle: this.keyword,
						page: this.page,
						size: 20
					}
				}).then(({
					list
				}) => {
					if (list.length > 0) {
						this.productList = [...this.productList, ...list]
						this.page++
						if (list.length < 20) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}

					} else {
						this.status = "nomore"
					}

				})

			},
			dealPrice(price) {
				price = (price / 100).toFixed(2)
				return price
			},
			// 手动加载更多
			addMoreData() {
				this.status = 'loading'
				this.sendSearch()
			},
			// 前往商品详情页面
			detail(uuid) {
				uni.navigateTo({
					url: "/pages/productdetail/productdetail?uuid=" + uuid
				})
			}
		},
		created() {
			this.sendSearch()
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		padding: 20rpx 20rpx 0;

		.search-container {
			height: 70rpx;
			background-color: #fff;
			border-radius: 999rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-ipt {
				padding-left: 10rpx;
				flex: 1;

				.ipt {
					font-size: 24rpx;

				}
			}

			.submit {
				background-color: #FC5E14;
				color: #fff;
				font-size: 24rpx;
				line-height: 50rpx;
				padding: 0 30rpx;
				border-radius: 999rpx;
			}
		}

		.search-list {
			padding: 0 10rpx 10rpx;
			margin: 20rpx 0;

			.search-item {
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 20rpx 0;
				box-shadow: 0 0 10px #0F3156;

				.pri_pic {
					padding: 10rpx;

					image {
						width: 100%;
					}
				}

				.pro-desc {
					margin-top: 20rpx;
					font-size: 28rpx;
					padding: 0 20rpx;


					.title {
						color: #333;
						line-height: 48rpx;
						white-space: nowrap;
						overflow: hidden;
						font-weight: 700;
						text-overflow: ellipsis;
					}

					.price {
						color: #FF4A5C;
						font-weight: 600;
						line-height: 60rpx;
					}

					.text {
						color: #fff;
						display: inline-block;
						max-width: 100%;
						white-space: nowrap;
						overflow: hidden;
						padding: 5rpx 40rpx;
						font-size: 24rpx;
						text-overflow: ellipsis;
						border-radius: 999rpx;
						background-color: #FA3534;
					}

					.shop {
						font-size: 24rpx;
						color: #ccc;
						padding: 10rpx 0;
					}
				}
			}
		}


	}
</style>
